<template>
  <el-row :gutter="40">
    <el-col :span="8">
      <el-input
          placeholder="搜索题号或题目名称"
          prefix-icon="el-icon-search"
          v-model="searchContent">
      </el-input>
    </el-col>
    <el-button type="primary" plain>搜索</el-button>
  </el-row>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="status"
        label="状态"
        width="80">
    </el-table-column>
    <el-table-column
        prop="id"
        label="题号"
        width="150">
    </el-table-column>
    <el-table-column
        prop="name"
        label="题目名称">
      <template #default="scope">
        <div class="problem-link" @click="linkClick(scope.row)">{{scope.row.name}}</div>
      </template>
    </el-table-column>
    <el-table-column
        prop="difficulty"
        label="难度"
        width="150">
    </el-table-column>
    <el-table-column
        prop="pass"
        label="通过率"
        width="150">
      <template #default="scope">{{scope.row.pass}} %</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "ProblemSet",
  props: {
    tableData: Array
  },
  data() {
    return {
      searchContent: '',
    }
  },
  methods: {
    linkClick(row) {
      // console.log(row);
      this.$router.push({name: 'Problem', params: {name: row.name}});
    }
  }
}
</script>

<style scoped>
  .problem-link {
    display: inline;
    cursor: pointer;
  }
  .problem-link:hover {
    color: deepskyblue;
  }
</style>